<template>
  <!-- 使用el-form组件创建一个行内表单 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <!-- 表单项：Approved by -->
    <el-form-item label="图书名称">
      <!-- 使用el-input组件创建一个文本输入框 -->
      <el-input v-model="formInline.user" placeholder="请输入书名" clearable />
    </el-form-item>
    
    <!-- 表单项：Activity zone -->
    <el-form-item label="图书类别">
      <!-- 使用el-select组件创建一个下拉选择框 -->
      <el-select
        v-model="formInline.region"
        placeholder="请选择"
        clearable
      >
        <!-- 下拉选项：Zone one -->
        <el-option label="小说"  />
        <!-- 下拉选项：Zone two -->
        <el-option label="散文" />
      </el-select>
    </el-form-item>
    <!-- 表单项：Activity time -->
    <el-form-item label="出版时间">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="~"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :size="size"
      />
    </el-form-item>

    <!-- 表单项：Query button -->
    <el-form-item>
      <!-- 使用el-button组件创建一个查询按钮 -->
      <el-button type="primary" @click="onSubmit">搜索</el-button>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>




<div>
  <el-table
    ref="singleTableRef"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
    @current-change="handleCurrentChange"
  >

    <el-table-column
      type="index"
      fixed
      prop="index"
      label="序号"
      width="120"
    />
    <el-table-column property="name" label="图书名称" width="120" />
    <el-table-column property="price" label="图书价格" width="120" />
    <el-table-column property="author" label="图书作者" width="120" />
    <el-table-column property="isbn" label="ISBN" width="120" />
    <el-table-column property="date" label="出版时间" width="120" />
    <el-table-column label="操作" width="140">
      <template #default="scope">
        <el-button
          type="text"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="handleDelete(scope.$index, scope.row)"
          hongsh
          style="color: red"
        >
         删除
        </el-button>
      </template>
    </el-table-column>

  </el-table>




  
</div>

<el-pagination background layout="prev, pager, next" :total="500" />

</template>

<script lang="ts" setup>
// 导入reactive函数，用于创建响应式对象
import { reactive } from 'vue'

// 使用reactive创建一个响应式表单数据对象
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

// 定义表单提交处理函数
const onSubmit = () => {
  console.log('submit!')
}
import { ref } from 'vue'
const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')




import type { TableInstance } from 'element-plus'
interface User {
  date: string
  name: string
  isbn: string
  price: string
  author: string
}

const currentRow = ref()
const singleTableRef = ref<TableInstance>()


const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val
}
const tableData: User[] = [
  
  {
    date: '2016-05-02',
    name: '《四国演义》',
    isbn: '123456789',
    price: '100',
    author: '王大虎',
  },
  {
    date: '2016-05-04',
    name: '《四体》',
    isbn: '123456789',
    price: '100',
    author: '王三虎',
  },
  {
    date: '2016-05-01',
    name: '《三体》',
    isbn: '123456789',
    price: '100',
    author: '王大虎',
  },
  {
    date: '2016-05-01',
    name: '《三体》',
    isbn: '123456789',
    price: '100',
    author: '王大虎',
  },
  {
    date: '2016-05-03',
    name: '《三体》',
    isbn: '123456789',
    price: '100',
    author: '王大虎',
  }

 
]


</script>

<style>
/*  自定义表单样式，设置输入框和选择框的宽度 */
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}


</style>